import React, { Component } from 'react';

import { Scroll } from '../common-ui-parts';
import HeadLine, { HEAD_LINE_COLOR } from '../common-ui-parts/HeadLine';
import CommonConstants from '../../constants/CommonConstants';

/**
 * アドバイス：心筋梗塞
 */
class Advice extends Component {
  scrollTop() {
    this.refs.scrollArea.scrollTop();
  }

  render() {
    const { allGood, Advices, habit, improveRisk } = this.props;
    return (
      <div className="Advice">
        <Scroll
          ref="scrollArea"
          fixedHeight={CommonConstants.SCROLL_FIXED_HIGHT.ADVICE}
          customStyle={CommonConstants.SCROLL_Z}
        >
          { allGood.isAllGood === 1 ?
            <div className="report-card">
              <div className="card-content">
                <HeadLine
                  level={2}
                  color={HEAD_LINE_COLOR.BLUE}
                >
                  健康のためのアドバイス
                </HeadLine>
                <p>あなたの入力したデータから判断すると、今のあなたは、同性・同年代の方の中で循環器疾患を発症するリスクが最も低い健康状況であることがわかりました。</p>
                <p>今後もこの健康状況が続くことが望ましいと思います。</p>
                <p>実は、今のままの健康状況が保たれたとしても、生活習慣病のリスクは年齢が高くなることだけで高まっていきます。そのため、年を重ねるごとに、生活習慣にはますます注意していく必要があります。</p>
              </div>

              <div className="card-content">
                <HeadLine
                  level={3}
                  color={HEAD_LINE_COLOR.BLUE}
                >
                  運動はしていますか？
                </HeadLine>
                <p>きつい運動をしなくても、日々の活動量を多くすることで、健康は保たれます。座りっぱなしの生活は生活習慣病のリスクを高めるそうです。毎日、活動的に過ごしていきましょう！</p>
              </div>


              <div className="card-content">
                <HeadLine
                  level={3}
                  color={HEAD_LINE_COLOR.BLUE}
                >
                  食事はどうですか？
                </HeadLine>
                <p>こんなことに気を付けて、見直してみてください。</p>
                <p>○3食の量は同じくらいにする方がいいようです。特に一食にドカ食いをする生活を続けていると、身体に必要な栄養素が不足しやすくなります。体重が増える原因になる場合もありますから、気を付けましょう。</p>
                <p>○栄養バランスのよい食事を心がけることも大事です。おかずは、野菜を多くとり、お肉ばかりではなく魚や豆類も摂るようにしましょう。</p>
                <p>○もちろん、お酒の飲みすぎや、甘いものの食べ過ぎは、生活習慣病の悪化を招きます。好きなことも、ほどほどに、ということで過ごしていけるといいですね。</p>
              </div>

              <div className="card-content">
                <HeadLine
                  level={3}
                  color={HEAD_LINE_COLOR.BLUE}
                >
                  体重はどうですか？
                </HeadLine>
                <p>太り過ぎ・痩せすぎは、どちらも将来の病気のリスクを高めます。適正な体重をキープしていきましょう！</p>
              </div>

              <div className="card-content">
                <HeadLine
                  level={3}
                  color={HEAD_LINE_COLOR.BLUE}
                >
                  生活習慣を見直して、ますます良い健康状況を保って過ごしてください！
                </HeadLine>
              </div>
            </div>


            :


            <div className="report-card">
              <div className="card-content">
                <HeadLine
                  level={2}
                  color={HEAD_LINE_COLOR.BLUE}
                >
                  健康のためのアドバイス
                </HeadLine>
                <p>あなたの入力したデータから、リスクを高める可能性のある健康状況について、以下のように確認できました。</p>
              </div>

              <div className="card-content">
                <HeadLine
                  level={3}
                  color={HEAD_LINE_COLOR.BLUE}
                >
                  体重（ＢＭＩ）
                </HeadLine>
                <p dangerouslySetInnerHTML={{__html: Advices.bmiAdvices}} />
              </div>

              <div className="card-content">
                <HeadLine
                  level={3}
                  color={HEAD_LINE_COLOR.BLUE}
                >
                  血糖
                </HeadLine>
                <p dangerouslySetInnerHTML={{__html: Advices.bloodSugarAdvices}} />
              </div>

              <div className="card-content">
                <HeadLine
                  level={3}
                  color={HEAD_LINE_COLOR.BLUE}
                >
                  血圧
                </HeadLine>
                <p dangerouslySetInnerHTML={{__html: Advices.bloodPressureAdvices}} />
              </div>

              <div className="card-content">
                <HeadLine
                  level={3}
                  color={HEAD_LINE_COLOR.BLUE}
                >
                  血中脂質
                </HeadLine>
                <p dangerouslySetInnerHTML={{__html: Advices.bloodLipidsAdvices}} />
              </div>

              <div className="card-content">
                <HeadLine
                  level={3}
                  color={HEAD_LINE_COLOR.BLUE}
                >
                  たばこ
                </HeadLine>
                <p dangerouslySetInnerHTML={{__html: Advices.smokingAdvices}} />
              </div>
            </div>
          }

          <div className="report-card">
            <div className="card-content">
              <HeadLine
                level={2}
                color={HEAD_LINE_COLOR.BLUE}
              >
                そんなあなたに<br/>
                おすすめの生活習慣は？
              </HeadLine>

              <div className="recommend-habit-content" dangerouslySetInnerHTML={{__html: habit.recommendation}}/>
            </div>
          </div>


          <div className="report-card">
            <div className="card-content">
              <HeadLine
                level={2}
                color={HEAD_LINE_COLOR.GREEN}
              >
                あなたが変わると、あなたのリスク<br/>は最大でこれだけ下がります！
              </HeadLine>

              <p>
                なお、改善しても効果が現れるのには時間がかかります。<br/>
                また、これまでの習慣の影響が完全に除かれない場合もあります。
              </p>
            </div>

            <div className="card-content">
              <HeadLine
                level={3}
                color={HEAD_LINE_COLOR.GREEN}
              >
                心筋梗塞のリスク低下
              </HeadLine>
              <dl className="your-risk-content">
                <dt>あなたの現在のリスク</dt>
                <dd>{ improveRisk.you.toFixed(CommonConstants.DECIMAL_DIGIT) }％</dd>
              </dl>

              { improveRisk.improveBloodSugarRisk === undefined ?
                null

                :

                <p className="decreasable-risk">
                  ・血糖値が良好になると、あなたのリスクが最大で<strong>{ improveRisk.improveBloodSugarRisk.toFixed(CommonConstants.DECIMAL_DIGIT) }％</strong>に低下します。
                </p>
              }

              { improveRisk.improveBloodPressureRisk === undefined ?
                null

                :

                <p className="decreasable-risk">
                  ・血圧のコントロールが良好になると、あなたのリスクが最大で<strong>{ improveRisk.improveBloodPressureRisk.toFixed(CommonConstants.DECIMAL_DIGIT) }％</strong>に低下します。
                </p>
              }

              { improveRisk.improveSmokingRisk === undefined ?
                null

                :

                <p className="decreasable-risk">
                  ・禁煙すると、あなたのリスクが最大で<strong>{ improveRisk.improveSmokingRisk.toFixed(CommonConstants.DECIMAL_DIGIT) }％</strong>に低下します。
                </p>
              }

              { improveRisk.improveLipidRisk === undefined ?
                null

                :

                <p className="decreasable-risk">
                  ・脂質のコントロールが良好になると、あなたのリスクが最大で<strong>{ improveRisk.improveLipidRisk.toFixed(CommonConstants.DECIMAL_DIGIT) }％</strong>に低下します。
                </p>
              }

              { improveRisk.improveAll === undefined ?
                null

                :

                <p className="decreasable-max-risk">
                  （すべて実行すると、あなたのリスクは最大で<strong>{ improveRisk.improveAll.toFixed(CommonConstants.DECIMAL_DIGIT) }％</strong>に低下します。）
                </p>
              }

              { improveRisk.improveCount > 0 ?
                null

                :

                <p>
                  （現在のリスクはそれほど高くありません。このままの生活習慣を維持しましょう。）
                </p>
              }

            </div>
          </div>
        </Scroll>
      </div>
    );
  }
}
/*
Advice.propTypes = {
  allGood: React.PropTypes.shape({
    isAllGood: React.PropTypes.number.isRequired,
  }),

  Advices: React.PropTypes.shape({
    bmiAdvices: React.PropTypes.string,
    bloodSugarAdvices: React.PropTypes.string,
    bloodPressureAdvices: React.PropTypes.string,
    bloodLipidsAdvices: React.PropTypes.string,
    smokingAdvices: React.PropTypes.string,
  }),

  habit: React.PropTypes.shape({
    recommendation: React.PropTypes.string,
  }),

  improveRisk: React.PropTypes.shape({
    you: React.PropTypes.number.isRequired,
    improveBloodSugarRisk: React.PropTypes.number,
    improveBloodPressureRisk: React.PropTypes.number,
    improveSmokingRisk: React.PropTypes.number,
    improveLipidRisk: React.PropTypes.number,
    improveAll: React.PropTypes.number,
    improveCount: React.PropTypes.number.isRequired,
  }),
};*/

export default Advice
